<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>delivery-time-picker</title>
        <script src="js/delivery-time-picker.js"></script>
        <link
            type="text/css"
            rel="stylesheet"
            href="css/delivery-time-picker.css"
        />
        <style>
            html,
            body {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
            button {
                width: 80%;
                height: 50px;
                line-height: 50px;
                font-size: 30px;
                display: block;
                margin: 0 auto 50px auto;
            }
        </style>
    </head>
    <body>
        <button type="button" onclick="show()">点击显示</button>
        <button type="button" onclick="destory()">点击销毁</button>
        <div id="result"></div>
        <div id="root"></div>
    </body>
    <script type="text/javascript">
        window.addEventListener("load", function(e) {
            // 在页面加载时初始化控件，参数1是控件选项，参数2是一个dom的id字符串且可以忽略
            DeliveryTimePicker.init(
                {
                    dayRange: 10, // 日期的显示数量，从今天起往后推
                    timeInterval: 60, // 时间的间隔，单位分钟
                    startTime: 8, // 时间范围的开始（开始营业的时间）
                    endTime: 24, // 时间范围的结束（结束营业的时间）
                    showDate: false, // 显示‘今天/明天/后天’还是全部显示日期
                    showWeekday: true, // 是否显示周几
                    clickOutside: true, // 点击选择器外部关闭，默认true开启
                    // 选择时间后的回调函数
                    callback: function(str, time) {
                        // 参数1是 “yyyy-MM-dd HH:mm”格式的字符串
                        // 参数2是js的一个Date()对象
                        console.log("选择了：", str, time);
                        document.getElementById("result").innerHTML =
                            "选择了：" + str;
                    }
                },
                "#root" // 要将控件添加到指定的dom下面，注意要加#号，此参数如果不写默认添加到body最后
            );
        });
        function show() {
            // 显示控件
            DeliveryTimePicker.show();
        }
        function destory() {
            // ~~~建议在不用时销毁控件
            DeliveryTimePicker.destory();
        }
    </script>
</html>
